<template>
    <div class="pay-container">
       <!-- 生成微信支付二维码 -->
       <div class="erweima">
         <img :src="payUrl" alt="">
       </div>
       <svg class="icon" aria-hidden="true">
			<use xlink:href="#icon-wechat_pay"></use>
		</svg>
		<span>使用微信进行支付</span>

        <el-descriptions title="订单详情">
			<el-descriptions-item label="订单号">{{this.orderDetail.order_id}}</el-descriptions-item>
			<el-descriptions-item label="创建时间">{{this.orderDetail.create_time}}</el-descriptions-item>
			<el-descriptions-item label="产品名称">{{}}</el-descriptions-item>
			<el-descriptions-item label="商品描述">{{}}</el-descriptions-item>
			<el-descriptions-item label="购买数量">{{}}</el-descriptions-item>
			<el-descriptions-item label="购买用户">{{this.orderDetail.user_nickname}}</el-descriptions-item>
			<el-descriptions-item label="手机号">{{this.orderDetail.user_phone}}</el-descriptions-item>
			<el-descriptions-item label="总价格">{{this.orderDetail.total_fee}}</el-descriptions-item>
		</el-descriptions>
    </div>
</template>

<script>
import qrCode from "qrcode"
import * as api from "@/api/tarnsaction"
export default{
    meta:{
        title: '',
        name:"支付页",
    },
   data(){
    return{
        payUrlRes:{},//请求获取的支付结果
        payUrl:"",
        order_id:"",//订单号
        order_id:"",//订单号
        orderDetail:{
           create_time:"",
            total_fee:"",
            order_id:"",
            user_phone:"",
            user_nickname:"",
            orderDetail:[
                {
                description:"",
                productName:"",
                quantity:""
                }
            ]

        }
    }
   },
   created(){
     let {order_id}=this.$route.query;
     this.order_id=order_id;
    //  3.如果用户刷新了当前页面，本次交易取消，我们需要让用户重新提交交易
    if(!this.order_id){
        // 没有订单id 有可能用户刷新了页面
        // 提示：本次交易取消，返回支付页面
        this.$alert("本次交易取消，请重新提交","提示",{
            confirmButtonText:"确定",
            callback:(action)=>{
                this.$router.push({path:"/vipmanager/charge"})
            }
        })
        return;
    }
    // 1.根据订单id 请求订单详细请
    // 2.根据订单详情 获取微信支付地址，===》获取地址之后，生成二维码

    // 并发请求 一次发送多个请求 Promise.all[promise1,promise2]
    Promise.all([api.getOrderDetail(this.order_id),api.pay(this.order_id)])
    .then(res=>{
        this.orderDetail=res[0].data.data;
        // console.log(this.orderDetail)
        let paymentRes=res[1].data;

        if(paymentRes.state){
            // 获取支付地址
            let payUrlImg=paymentRes.code_url;
            // 生成二维码
            qrCode.toDataURL(payUrlImg,(err,img)=>{
                this.payUrl=img
            })
        }
     })


        // 轮询 查询支付状态
        // 轮询的时候 一定要设置时间
        // 设置200ms
        this.queryPayStatusInterval=setInterval(()=>{
            api.QueryPayStatus(this.order_id)
            .then(res=>{
                if(res.data.state){
                    this.$router.push({path: "/payment/paysuccess"})
                }
            })
        },2000)
   },


   	beforeDestroy() {
		//组件即将销毁的时候
		//清除定时器
		clearInterval(this.queryPayStatusInterval)
	},


}


</script>

<style scoped lang="less">
/deep/.el-descriptions__header{
    height:40px;

}
</style>